<template lang="">
<!--头部表单组件 -->
  <div>
   <div>
      <el-form size='mini' :model="numberValidateForm" ref="numberValidateForm"  class="demo-ruleForm">
<div class="userserch">
    <el-form-item prop="username">
    <el-input  placeholder="根据用户名搜索" v-model="numberValidateForm.username" ></el-input>
  </el-form-item>
  <el-form-item>
    <el-button @click="resetForm('numberValidateForm')">清空</el-button>
    <el-button type="primary" @click="submitForm('numberValidateForm')">搜索</el-button>
  </el-form-item>
</div>
<!-- 点击触发父组件add自定义事件 -->
  <el-button type="success" size="small" @click="$emit('add')"><i class="el-icon-edit"></i>新增用户</el-button>
</el-form>
   </div>

  </div>
</template>
<script>
export default {
  components: {},
  data () {
    return {
      // 输入框双向绑定
      numberValidateForm: {
        username: ''
      }
      // open: false// 设置一个开关
    }
  },
  methods: {
    // 搜索
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 把username传过去
          this.$emit('name', this.numberValidateForm.username)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
      // 把username传过去
      this.$emit('name', this.numberValidateForm.username)
    }
  }
}
</script>
<style scoped lang="scss">
.demo-ruleForm {
  display: flex;
  justify-content: space-between;
  .el-input__inner {
    width: 256px;
  }
  .userserch {
    width: 330px;
    display: flex;
    justify-content: space-between;
  }
  .el-form-item {
    margin-bottom: 0;
  }
}
</style>
